<template>
    <transition name="fade">
      <div class="modal-mask" v-show="visible" @click.self="close">
        <div class="modal-container">
          <div class="modal-header">
            <h3>用户注册</h3>
            <button class="modal-close" @click="close">×</button>
          </div>
          
          <div class="modal-body">
            <form class="auth-form" @submit.prevent="handleRegister">
              <div class="form-group">
                <input 
                  type="text" 
                  v-model="form.username"
                  placeholder="请输入用户名"
                  required
                >
              </div>
              <div class="form-group">
                <input 
                  type="email" 
                  v-model="form.email"
                  placeholder="请输入邮箱"
                  required
                >
              </div>
              <div class="form-group">
                <input 
                  type="tel" 
                  v-model="form.phone"
                  placeholder="请输入手机号"
                  required
                >
              </div>
              <div class="form-group">
                <input 
                  type="password" 
                  v-model="form.password"
                  placeholder="请输入密码"
                  required
                >
              </div>
              <div class="form-group">
                <input 
                  type="password" 
                  v-model="form.confirmPassword"
                  placeholder="请确认密码"
                  required
                >
              </div>
              <div class="form-group verification-code">
                <input 
                  type="text" 
                  v-model="form.code"
                  placeholder="请输入验证码"
                  required
                >
                <button 
                  type="button" 
                  class="get-code-btn"
                  :disabled="isCountingDown"
                  @click="getVerificationCode"
                >
                  {{ codeBtnText }}
                </button>
              </div>
              <div class="form-agreement">
                <label>
                  <input type="checkbox" v-model="form.agreed" required> 
                  我已阅读并同意<a href="#">《用户协议》</a>
                </label>
              </div>
              <button type="submit" class="auth-btn">注册</button>
            </form>
  
            <div class="auth-footer">
              <p class="auth-link">
                已有账号? <a href="#" @click.prevent="showLogin">立即登录</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useUserStore } from '@/stores/userStore'
  
  const props = defineProps({
    visible: Boolean
  })
  
  const emit = defineEmits(['update:visible', 'showLogin'])
  
  const userStore = useUserStore()
  
  const form = ref({
    username: '',
    email: '',
    phone: '',
    password: '',
    confirmPassword: '',
    code: '',
    agreed: false
  })
  
  const isCountingDown = ref(false)
  const countdown = ref(60)
  
  const codeBtnText = computed(() => {
    return isCountingDown.value ? `${countdown.value}秒后重新获取` : '获取验证码'
  })
  
  const close = () => {
    emit('update:visible', false)
  }
  
  const showLogin = () => {
    close()
    emit('showLogin')
  }
  
  const getVerificationCode = () => {
    if (!form.value.phone) {
      alert('请输入手机号')
      return
    }
    
    // 模拟发送验证码
    isCountingDown.value = true
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
        isCountingDown.value = false
        countdown.value = 60
      }
    }, 1000)
    
    console.log('发送验证码到:', form.value.phone)
  }
  
  const handleRegister = async () => {
    if (form.value.password !== form.value.confirmPassword) {
      alert('两次输入的密码不一致')
      return
    }
    
    try {
      await userStore.register(form.value)
      close()
      // 注册成功后可以自动打开登录框
      emit('showLogin')
    } catch (error) {
      alert(error.message)
    }
  }
  </script>
  
  <style scoped>
  /* 复用登录模态框的样式 */
  .modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .modal-container {
    width: 450px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: modalIn 0.3s ease;
  }
  
  @keyframes modalIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
  }
  
  .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0 10px;
    transition: color 0.3s;
  }
  
  .modal-close:hover {
    color: #ff6700;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  /* 表单样式 */
  .auth-form {
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group input {
    width: 90%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    transition: border 0.3s;
  }
  
  .form-group input:focus {
    border-color: #ff6700;
    outline: none;
  }
  
  .verification-code {
    display: flex;
    gap: 10px;
  }
  
  .verification-code input {
    flex: 1;
  }
  
  .get-code-btn {
    padding: 0 15px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;
  }
  
  .get-code-btn:disabled {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
  }
  
  .get-code-btn:not(:disabled):hover {
    background: #ff6700;
    color: white;
    border-color: #ff6700;
  }
  
  .form-agreement {
    margin: 20px 0;
    font-size: 14px;
    color: #666;
  }
  
  .form-agreement a {
    color: #ff6700;
    text-decoration: none;
  }
  
  .auth-btn {
    width: 100%;
    padding: 12px;
    background: #ff6700;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .auth-btn:hover {
    background: #f25807;
  }
  
  .auth-footer {
    margin-top: 30px;
  }
  
  .auth-link {
    text-align: center;
    color: #666;
    font-size: 14px;
  }
  
  .auth-link a {
    color: #ff6700;
    text-decoration: none;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  </style>